﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
	.menu 
	{
	color: #555;
	margin: 3px -22px 0 0;
	width: 143px;
	position: relative;
	height: 17px;
	text-align:left;
	
	}
	.submenu
	{
	background: #fff;
	position: absolute;
	top: 0px;
	left: 75px;
	z-index: 100;
	width: 135px;
	display: none;
	margin-left: 10px;
	padding: 5px;	
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
	}

	.menu li a 
	{
	color: #555555;
	display: block;
	font-family: arial;
	font-weight: bold;
	cursor: pointer;
	text-decoration:none;
	}

	.menu li a:hover
	{
	background:#155FB0;
	color: #FFFFFF;
	text-decoration: none;
	}    
	
	.submenu1{width:500px !important;}
	'submenu2{width:300px !important;}
	.submenu3{width:400px !important;}
		
    </style>

 <script type="text/javascript" >

     $(function () {
         
         $(".menu").hover(
                      function () {
                          $(this).attr("style", "z-index:200;");
                          $(this).find(".submenu").show();
                      },
                      function () {
                          $(".submenu").hide();
                          $(this).attr("style", "z-index:0;");
                      }
                    );

         $(".SubMenuCap2").hover(
            function () {
                $(this).attr("style", "z-index:200;");
                $(this).find(".SubMenuCap2_Sub").show();
            },
            function () {
                $(".SubMenuCap2_Sub").hide();
                $(this).attr("style", "z-index:0;");
            }
        );

     });


</script>

</head>
<body>

	<div>
		<div class="menu"> <a>menu cap 11</a>
			<div class="submenu submenu1" > 
					<div> menu c </div>
					<div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>

                    <div> menu 2 </div>
                    <div> menu 2 </div>
			
			</div>
		</div>
    <div class="menu"> <a>menu cap 22</a>
			<div class="submenu submenu2" > 
					<div> menu </div>
					<div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>

                    <div> menu 2 </div>
                    <div> menu 2 </div>
			
			</div>
		</div>
	

   <div class="menu"> <a>menu cap 3</a>
			<div class="submenu submenu3" > 
					<div> menu 3</div>
					<div> menu 42 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>
                    <div> menu 2 </div>

                    <div> menu 2 </div>
                    <div> menu 2 </div>
			
			</div>
		</div>
	</div>

    <br />
    <br />

    
        <div class="SubMenuCap2"><a>Hover de hien thi</a>
        <div class="SubMenuCap2_Sub" style="display:none;">
             <!--menu 1-->
		    <div class="menu"> <a>menu cap 11</a>
			    <div class="submenu submenu1" > 
					    <div> menu c </div>
					    <div> menu 2 </div>
                        <div> menu 2 </div>
                        <div> menu 2 </div>
                        <div> menu 2 </div>
                        <div> menu 2 </div>
                        <div> menu 2 </div>

                        <div> menu 2 </div>
                        <div> menu 2 </div>
			
			    </div>
		    </div>
            <!--menu 2-->
            <div class="menu"> <a>menu cap 22</a>
			        <div class="submenu submenu2" > 
					        <div> menu </div>
					        <div> menu 2 </div>
                            <div> menu 2 </div>
                            <div> menu 2 </div>
                            <div> menu 2 </div>
                            <div> menu 2 </div>
                            <div> menu 2 </div>

                            <div> menu 2 </div>
                            <div> menu 2 </div>
			
			        </div>
		        </div>
	
                <!--menu 3-->
                <div class="menu"> <a>menu cap 3</a>
			            <div class="submenu submenu3" > 
					            <div> menu 3</div>
					            <div> menu 42 </div>
                                <div> menu 2 </div>
                                <div> menu 2 </div>
                                <div> menu 2 </div>
                                <div> menu 2 </div>
                                <div> menu 2 </div>

                                <div> menu 2 </div>
                                <div> menu 2 </div>
			
			            </div>
		            </div>
	            </div>
        
        </div>
    
    


</body>
</html>
